<template>
  <div class="wrapper">
    <!-- 动画区，设置flex布局 -->
    <!-- <div class="animation">
      <router-view v-slot="{ Component }">
        <transition :name="transitionName">
          <component :is="Component" />
        </transition>
      </router-view>
    </div> -->
    <router-view></router-view>
  </div>
</template>

<script setup>
import { RouterLink, useRouter } from "vue-router";
import { ref } from "vue";

let transitionName = ref();
let router = useRouter();
router.beforeEach((to, from) => {
  // 根据路由标记判断触发哪个动画
  console.log(to.meta.index, from.meta.index);
  if (to.meta.index > from.meta.index) {
    // 从右往左动画
    transitionName.value = "slide-right";
  } else if (to.meta.index < from.meta.index) {
    // 从左往右动画
    transitionName.value = "slide-left";
  } else {
    transitionName.value = "";
  }
});
</script>

<style scoped>
/* .wrapper {
  overflow-x: hidden;
  .animation {
    display: flex;
    width: 200%;
    & > div {
      width: 50%;
    }
    .slide-left-enter-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-right-leave-active {
      transition: transform 0.3s;
    }

    .slide-right-enter-from {
      transform: translateX(0);
    }
    .slide-right-enter-to {
      transform: translateX(-100%);
    }
    .slide-right-leave-from {
      transform: translateX(0);
    }
    .slide-right-leave-to {
      transform: translateX(-100%);
    }

    .slide-left-enter-from {
      transform: translateX(-200%);
    }
    .slide-left-enter-to {
      transform: translateX(-100%);
    }
    .slide-left-leave-from {
      transform: translateX(0);
    }
    .slide-left-leave-to {
      transform: translateX(100%);
    }
  }
} */
</style>
